<template>
    <div class="search">
        <div class="title">
            <div class="back" @click="router.go(-1)"></div>
            <div class="search-box">
                <div class="search-box-icon"></div>
                <input type="text" @change="handleChange(searchText)" v-model="searchText" placeholder="请输入门店名称/地址">
            </div>
            <div class="search-btn" @click="goSearchItem">搜索</div>
        </div>
        <div class="search-item">
            <ul>
                <li v-for="(item, index) in searchRelated.content" :key="index">
                    <div class="item-name">
                        <div class="item-name-type">{{ hostTpey(item.shopType) }}</div>
                        <div class="item-name-text">{{ item.shopName }}</div>
                    </div>
                    <p>{{ item.address }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSearchKey } from '@/api/api'
import type { searchRelatedType } from '@/tsList/homeFunts'


const router = useRouter()

const searchText = ref('')

const searchRelated = reactive<{ content: Array<searchRelatedType> }>({
    content: []
})


function handleChange(searchText: string) {
    console.log('输入的文字', searchText);
    if (searchText) {
        getSearchKey(searchText).then((res) => {
            searchRelated.content = res.data.content
        })
    }
}

function hostTpey(type: string) {
    if (type == "DJJD") {
        return '电竞酒店'
    } else {
        return '网咖'
    }
}

function goSearchItem() {
    console.log('传过来的数据', searchText.value);
    if (searchText.value) {
        router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path: '/searchItem',
            query: {
                keyword: searchText.value,
                searchType: 'ALL'
            }
        })
    }
}

onMounted(() => {

})

</script>

<style lang="less" scoped>
.auto-img {
    width: 100%;
    height: 100%;
    display: block;
}

.search {
    min-height: 100vh;
    background-color: white;

    .title {
        display: flex;
        align-items: center;
        padding: 10px 10px;

        .back {
            width: 20px;
            height: 20px;
            background-image: url('@/assets/icon/tme_ad_video_top_back.png');
            background-size: cover;
        }

        .search-box {
            flex: 1;
            height: 25px;
            border-radius: 999px;
            margin: 0 5px;
            background-color: #f4f5f8;
            display: flex;
            align-items: center;
            padding: 0 10px;

            .search-box-icon {
                width: 12px;
                height: 12px;
                background-image: url('@/assets/icon/Au.png');
                background-size: cover;
                margin: 0 5px;
            }

            input {
                flex: 1;
                background: none;
                outline: none;
                border: none;
            }

            input::-webkit-input-placeholder {
                /* 使用webkit内核的浏览器 */
                color: #bfbfbf;
                font-size: 13px;
            }
        }

        .search-btn {
            font-size: 13px;
            font-weight: 500;
        }
    }

    .search-item {

        ul {

            li {
                padding: 5px 10px;
                border-bottom: 1px solid #ddd;

                .item-name {
                    display: flex;
                    align-items: center;
                    font-size: 13px;

                    .item-name-type {
                        background-color: #5b6cd4;
                        padding: 0px 3px;
                        font-size: 12px;
                        color: #f3f3f3;
                        transform: scale(.8);
                        transform-origin: 0 10px;
                        border-radius: 3px;
                    }

                    .item-name-text {
                        font-weight: 600;
                    }
                }

                p {
                    font-size: 12px;
                    color: #9d9d9d;
                    width: 350px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>